<template>
  <h1 style="margin-left: 20px">讲师列表</h1>
  <div style="margin: 20px">
    <el-form :inline="true" :model="teacherQuery" class="demo-form-inline">
      <el-form-item>
        <el-input
          v-model="teacherQuery.name"
          placeholder="讲师姓名"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="teacherQuery.level"
          placeholder="讲师头衔"
          clearable
        >
          <el-option label="高级讲师" :value="1" />
          <el-option label="首席讲师" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="添加时间" clearable>
        <el-date-picker
          v-model="teacherQuery.begin"
          type="date"
          placeholder="请选择开始时间"
        ></el-date-picker>
        <el-date-picker
          v-model="teacherQuery.end"
          type="date"
          placeholder="请选择结束时间"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button type="primary" @click="reset">清空</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="state.teacherList" border style="width: 100%">
      <el-table-column
        type="index"
        :index="indexMethod"
        label="序号"
        width="70"
        align="center"
      />
      <el-table-column prop="name" label="名称" width="70" align="center" />
      <el-table-column prop="level" label="头衔" width="100" align="center">
        <template #default="scope">
          {{ scope.row.level === 1 ? "高级讲师" : "首席讲师" }}
        </template>
      </el-table-column>
      <el-table-column prop="intro" label="资历" align="center" />
      <el-table-column
        prop="gmtCreate"
        label="添加时间"
        width="180"
        align="center"
      />
      <el-table-column prop="sort" label="排序" width="70" align="center" />
      <el-table-column label="操作" width="150" align="center">
        <template #default="scope">
          <el-button type="primary" size="small">编辑</el-button>
          <el-button size="small" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin-top: 20px; display: flex; justify-content: center"
      v-model:current-page="page"
      v-model:page-size="limit"
      layout="total, prev, pager, next, jumper"
      :total="totalCount"
      @current-change="initTeacherPage"
    />
  </div>
</template>
  <script setup>
import { reactive, ref, toRefs } from "vue";
import teacherApi from "../../api/teacher";

//分页相关数据
const page = ref(1); //当前页
const limit = ref(10); //每页记录数
const totalCount = ref(0); //总记录数

const state = reactive({
  teacherList: [], //讲师列表数据
  teacherQuery: {}, //通过讲师列表查询参数//对象
});
//toRefs()结构对象时让对象保持响应式
const { teacherList, teacherQuery } = toRefs(state);
//分页方法
// const gotoPage=(pageIndex)=>{
//   teacherApi.getList(pageIndex,limit.value,state.teacherQuery).then(res=>{
//   state.teacherList=res.data.items
//   //为总记录数赋值
//   totalCount.value=res.data.totalCount
// })
// }
const initTeacherPage = (pageIndex = 1) => {
  //调用接口
  //vue3中ref获取值需要加.value
  page.value = pageIndex;
  teacherApi
    .getList(page.value, limit.value, state.teacherQuery)
    .then((res) => {
      state.teacherList = res.data.items;
      //为总记录数赋值
      totalCount.value = res.data.totalCount;
    });
};
initTeacherPage();

const indexMethod = (index) => {
  return index + 1;
};
const search = () => {
  //请求查询讲师api
  initTeacherPage();
};
const reset = () => {
  //清空查询信息
  state.teacherQuery = {};
  initTeacherPage();
};
</script>
